<template>
  <div class="header">
    <div class="header_left">
      <img
        class="logo"
        alt="Vue logo"
        src="../../assets/Img/header/position.png"
      />
      <span class="logo_text">智能通信参谋</span>
    </div>
    <div class="header_right">
      <span class="assist"
        ><a-icon type="question-circle" class="question-circle" />帮助中心</span
      >
      <a-divider type="vertical" class="vertical" />
      <div class="user">
        <div class="avatar">
          <img
            class="logo"
            alt="Vue logo"
            src="https://img0.baidu.com/it/u=671112370,873229032&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500"
          />
        </div>
        <a-dropdown>
          <span class="ant-dropdown-link" @click="(e) => e.preventDefault()">
            用户名 <a-icon type="caret-down" />
          </span>
          <a-menu slot="overlay">
            <a-menu-item>
              <a href="javascript:;">1st menu item</a>
            </a-menu-item>
            <a-menu-item>
              <a href="javascript:;">2nd menu item</a>
            </a-menu-item>
            <a-menu-item>
              <a href="javascript:;">3rd menu item</a>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;
  padding: 14px;
  background-image: url("../../assets/Img/header/background.png"); /* 设置背景图片 */
  background-repeat: no-repeat; /* 背景图片不重复 */
  background-position: center center; /* 背景图片在元素中居中显示 */
  background-size: cover; /* 背景图片覆盖整个元素 */
}

.logo {
  width: 37px;
}

.logo_text {
  font-size: 22px;
  color: white;
  font-weight: 900;
  padding-left: 16px;
}

.header_left {
  display: flex;
  align-items: center;
}

.question-circle {
  padding-right: 4px;
}

.vertical {
  margin: 0 24px;
}

.header_right {
  display: flex;
  align-items: center;
}

.user {
  display: flex;
  align-items: center;
}

.avatar {
  width: 37px;
  height: 37px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 16px;
  img {
    vertical-align: baseline;
  }
}
</style>
